<template>
  <el-dropdown @command="clickCommand" trigger="click" size="large">
    <span>
      <div class="tools_font"></div> <el-icon color="#606266">
        <i class="iconfont icon-fuhao-ziti"></i>
      </el-icon>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item :icon="CaretRight" command="large" :disabled="size == 'large'">超大</el-dropdown-item>
        <el-dropdown-item :icon="CaretRight" command="default" :disabled="size == 'default'">默认</el-dropdown-item>
        <el-dropdown-item :icon="CaretRight" command="small" :disabled="size == 'small'">较小</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script lang="ts" setup>
import { ref } from 'vue'//引入响应
import { ElMessage } from 'element-plus'//引入消息弹出框框架
import { CaretRight } from '@element-plus/icons-vue'//引入图标
const size = ref(localStorage.getItem("size")||'large')//默认large最大
const emit = defineEmits<{
  (e: 'changeSize', size: string): void
}>();
//点击切换字体大小事件
const clickCommand = (e: string) => {
  size.value = e;//赋值
  localStorage.setItem("size", e);
  emit('changeSize', e)//第一个参数为事件名,第二个参数为事件源e
  ElMessage.success('设置成功')
}

</script>

<style lang="less" scoped>
.tools_font {
  width: 10px;
  height: 20px;
  margin-left: 20px;

  .el-dropdown-menu {
    .el-dropdown-menu--large {
      .el-dropdown-menu__item {
        padding: 7px 40px;
        line-height: 22px;
        font-size: 14px;
      }
    }
  }

}

.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
</style>